<!--AI聊天  -->

<template>

    <div class="chat-message">
        <div class="user-text-message">
            <p>用户发送的问题</p>
        </div>
        <div class="user-image-message">
            <!-- 用户发送图片,使用vant组件 -->
            <van-image width="100px" height="100px" fit="cover" radius="5"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        </div>




        <!-- AI回复的内容 -->

        <div class="ai-message">
            <!-- 头像 -->

            <div class="customer-service">
                <img src="@/assets/kefu.png" alt="">
                <span> 福宝</span>
            </div>

            <!-- 文字内容 -->
            <!-- <div class="mark-text">

                本项目旨在构建一个以AI智能体为核心的福建省旅游信息查询系统，聚焦景点推荐、路线规划、交通天气查询等功能，为游客提供智能化、便捷化的旅游信息服务。项目采用前后端分离架构，前端基于Vite +
                TypeScript + Vue3技术栈，搭配轻量级移动端UI库Vant实现高效开发与响应式布局；后端采用SpringBoot框架构建RESTful
                API，通过MySQL进行数据存储与管理，将集成DeepSeekAI实现自然语言处理与智能推荐能力。
            </div> -->
            <!-- 加载 -->
            <div   >
               <loading></loading>
            </div>
            <!-- 车票查询 -->
           <trainTicket></trainTicket>
           <!-- 天气查询 -->
            <weather></weather>
            <!-- 搜索商品 -->
             <searchgood></searchgood>
        </div>
        
    </div>
</template>
<script  setup lang="ts">
import loading from"@/components/loading/index.vue"
import trainTicket from "@/components/trainticket/index.vue"
import weather from "@/components/weather/index.vue"

import searchgood from "@/components/searchgood/index.vue"

</script>

<style lang="less" scoped>
.chat-message {
    display: flex;
   
    // 上下排序
    flex-direction: column;
    // 要考虑顶出底部的输入框
    margin-bottom: 150px;

    .user-text-message {
        margin-top: 15px;
        align-self: flex-end;
        max-width: 70%;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.2s ease-in-out forwards;

        p {
            font-size: 16px;
            line-height: 1.5;
            background: #15c998;
            border-radius: 5px;
            border-top-right-radius: 0px;
            padding: 5px;
            color: white;
        }

    }




    .user-image-message {
        align-self: flex-end;
        margin-top: 15px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.2s ease-in-out forwards;


    }

    @keyframes fadeUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0px);
        }

    }

    .ai-message {
        margin-top: 15px;
        

        .customer-service {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            img {
                width: 30px;
                height: 30px;
                object-fit: cover;
            }

            span {
                font-size: 16px;
                padding-left: 10px;
            }

        }

        .mark-text {
            padding: 5px;
            font-size: 16px;
            line-height: 1.5;
            background: white;
            border-radius: 5px;
            border-top-left-radius: 0px;
            color: rgb(117, 114, 114);
        }

    }
}
</style>
